<template>
  <view class="container">
    <view class="tab-content">
      <view v-show="activeTab === 0">
        <!-- 投票详情内容 -->
        <voteDetail :id="id"></voteDetail>
      </view>
      <view v-show="activeTab === 1">
        <!-- 选手排名内容 -->
        <playerRank :id="id" />
      </view>
    </view>
    <!-- 自定义 TabBar -->
    <view class="tab-bar">
      <view
        :class="{ 'tab-item': true, active: activeTab === 0 }"
        @tap="activeTab = 0"
      >
        <image
          :src="
            activeTab === 0
              ? '/static/tabs/vote_selected.png'
              : '/static/tabs/vote_default.png'
          "
          class="tab-icon"
        />
        <text>投票详情</text>
      </view>
      <view
        :class="{ 'tab-item': true, active: activeTab === 1 }"
        @tap="activeTab = 1"
      >
        <image
          :src="
            activeTab === 1
              ? '/static/tabs/rank_selected.png'
              : '/static/tabs/rank_default.png'
          "
          class="tab-icon"
        />
        <text>选手排名</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import voteDetail from "./voteDetail.vue";
import playerRank from "./playerRank.vue";

// 接收页面参数
const query = defineProps<{
  id: string;
}>();

const activeTab = ref(0);
</script>
<style scoped lang="scss">
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.tab-content {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 68px; /* 留出底部 TabBar 的空间 */
}

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding-top: 6px;
  background-color: #fff;
  height: 68px; /* TabBar 高度 */
  z-index: 10;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: left;
  width: 48%;
}
.tab-item text {
  color: #333;
  margin-top: 5px;
  font-size: 12px;
}
.tab-icon {
  width: 25px;
  height: 25px;
}
.active {
  color: #27ba9b;
}
</style>
